<template>
    <div class="component-div">
        <!-- 页面标题 -->
        <div class="page-title">
            <!-- 标题文本 -->
            <div class="title-text">
                工作台
            </div>
            <div class="blue-bar">
        </div>
        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 下面div 的 class自己写，例如class="doctor-management" -->
            <div class="headData">
                <el-row :gutter="24">
                    <el-col :span="6" style="height:auto;width:auto" class="card">
                        <el-card shadow="hover" body-style="padding:5px 0px 0px 0px"><p class="headText">居民总数量</p><p class="data"><spanc class="residentsQuantity">{{head.residentsQuantity}}</spanc></p></el-card>
                    </el-col>
                    <el-col :span="6" style="height:auto;width:auto" class="card">
                        <el-card shadow="hover" body-style="padding:5px 0px 0px 0px"><p class="headText">签约居民数量</p><p class="data"><span class="doneServicesQuantity">{{head.doneServicesQuantity}}</span></p></el-card>
                    </el-col>
                    <el-col :span="6" style="height:auto;width:auto" class="card">
                        <el-card shadow="hover" body-style="padding:5px 0px 0px 0px"><p class="headText">待处理服务量</p><p class="data"><span class="pendingServicesQuantity">{{head.pendingServicesQuantity}}</span></p></el-card>
                    </el-col>
                    <el-col :span="6" style="height:auto;width:auto" class="card">
                        <el-card shadow="hover" body-style="padding:5px 0px 0px 0px"><p class="headText">已完成服务量</p><p class="data"><span class="signedResidentsQuantity">{{head.signedResidentsQuantity}}</span></p></el-card>
                    </el-col>
                </el-row>
            </div>
            <div class="dataOverviewAndToDoRemin">
                <el-row :gutter="24">
                    <el-col :span="18"><div id="dataOverview"></div></el-col>
                    <el-col :span="6"><div id="toDoRemin">
                        <el-card class="box-card" body-style="padding:0px">
                            <p>待办提醒</p>
                            <div v-for="(v,n,i) in toDoReminderData" :key="i" class="item">
                                <span>{{v}}</span>
                                <p v-if="i==0">待审核签约申请</p>
                                <p v-if="i==1">待审核服务申请</p>
                                <p v-if="i==2">待完成服务</p>
                                <p v-if="i==3">待处理续约</p>
                            </div>
                        </el-card>
                    </div></el-col>
                </el-row>
            </div>
            <div class="quantityByLabelAndSugar">
                <el-row :gutter="24">
                    <el-col :span="7" class="quantityByLabel" >
                        <p>居民标签</p>
                        <div v-for="(labelQuantity,index) in labelQuantityList" :key="index">
                            <p style="display:inline-block"><span class="label">{{labelQuantity.label}}</span></p>
                            <p style="display:inline-block"><span class="quantity">{{labelQuantity.quantity}}</span></p>
                            <el-progress :percentage="Math.round(labelQuantity.quantity/head.residentsQuantity*100)"/>
                        </div>
                    </el-col>
                    <el-col :span="17" class="sugarList">
                            <p>居民指标异常</p>
                            <el-row :gutter="24">
                                    <el-col :span="8" v-for="(sugar,index) in sugarList" :key="index" class="sugar">
                                        <p class="sugarData"><span class="sugarName">{{sugar.name}}</span><span class="sugarAge">{{sugar.age}}岁</span></p>
                                        <p style="text-align: center;color:red;">血糖过高</p>
                                    </el-col>
                            </el-row>
                    </el-col>
                </el-row>
            </div>
            <div class="teamAndContractedQuantity">
                <el-table :data="tableData" stripe style="width:100%">
                    <el-table-column prop="name" label="团队名"/>
                    <el-table-column prop="one" :label="dateList[0]" />
                    <el-table-column prop="two" :label="dateList[1]" />
                    <el-table-column prop="three" :label="dateList[2]" />
                    <el-table-column prop="four" :label="dateList[3]" />
                    <el-table-column prop="five" :label="dateList[4]" />
                    <el-table-column prop="six" :label="dateList[5]" />
                    <el-table-column prop="seven" :label="dateList[6]" />
                </el-table>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    import * as echarts from 'echarts'
    export default {
        data() {
            return {
                //头部数据
                head:{
                    residentsQuantity:'',
                    doneServicesQuantity:'',
                    pendingServicesQuantity:'',
                    signedResidentsQuantity:''
                },
                dateList:[],
                serviceList:[],
                contractList:[],
                residentList:[],
                dateOverviewList:[],
                //单日数据信息
                Overview:{
                    date:'',
                    service:'',
                    contract:'',
                    resident:''
                },
                //待办数据
                toDoReminderData:{
                    pendingService: '',
                    pendingContract: '',
                    pendingServiceApply: '',
                    pendingContractApply: ''
                },
                //标签数据集合
                labelQuantityList:[],
                //标签数据
                labelQuantity:{
                    label:'',
                    quantity:''
                },
                //血糖超标居民集合
                sugarList:[],
                //血糖数值超标的居民展示信息
                sugar:{
                    name:'',
                    age:''
                },
                //本周签约概况
                teamAndContractedQuantity:[],

                tableData:[],
                //单日签约概况
                teamList:[],
                //团队签约信息
                team:{
                    name:'',
                    contractedQuantity:''
                },
                tableTeam:{
                    name:'',
                    0:'',
                    1:'',
                    2:'',
                    3:'',
                    4:'',
                    5:'',
                    6:''
                }
            }
        },
        
        created() {
            this.init()
        },
        methods: {
            ...mapActions(['doSelectWorkbench']),
            init(){
                this.doSelectWorkbench().then(res => {
                    this.head = res.data.data[0];
                    console.log(res.data.data[5]);
                    this.dateOverviewList = res.data.data[1];
                    for(var i = 0;i<this.dateOverviewList.length;i++){
                        this.dateList.push(this.dateOverviewList[i].data);
                        this.serviceList.push(this.dateOverviewList[i].service);
                        this.contractList.push(this.dateOverviewList[i].contract);
                        this.residentList.push(this.dateOverviewList[i].resident);
                    }
                    this.doDataOverview();
                    this.toDoReminderData = res.data.data[2];
                    this.labelQuantityList = res.data.data[3];
                    this.sugarList = res.data.data[4];
                    this.teamAndContractedQuantity = res.data.data[5];
                    for(var k = 1;k<this.teamAndContractedQuantity.length+1;k++){
                        this.teamList = this.teamAndContractedQuantity[k-1];
                        this.teamList.forEach(team =>{
                            var j = this.tableData.findIndex(function(item){
                                return item.name === team.name;
                            })
                            var flag = this.tableData.some(item=>{
                                if(item.name==team.name){
                                    return true
                                }
                            })
                            if(flag){
                                if(k==1){
                                    this.tableData[j].one = team.contractedQuantity;
                                }
                                if(k==2){ 
                                    this.tableData[j].two = team.contractedQuantity;
                                }
                                if(k==3){
                                    this.tableData[j].three = team.contractedQuantity;
                                }
                                if(k==4){
                                    this.tableData[j].four = team.contractedQuantity;
                                }
                                if(k==5){
                                    this.tableData[j].five = team.contractedQuantity;
                                }
                                if(k==6){
                                    this.tableData[j].six = team.contractedQuantity;
                                }
                                if(k==7){
                                    this.tableData[j].seven = team.contractedQuantity;
                                }
                            }else{
                                var tableTeam = {
                                    name:'',
                                    one:0,
                                    two:0,
                                    three:0,
                                    four:0,
                                    five:0,
                                    six:0,
                                    seven:0
                                };
                                tableTeam.name = team.name;
                                if(k==1){
                                    tableTeam.one = team.contractedQuantity;
                                }
                                if(k==2){ 
                                    tableTeam.two = team.contractedQuantity;
                                }
                                if(k==3){
                                    tableTeam.three = team.contractedQuantity;
                                }
                                if(k==4){
                                    tableTeam.four = team.contractedQuantity;
                                }
                                if(k==5){
                                    tableTeam.five = team.contractedQuantity;
                                }
                                if(k==6){
                                    tableTeam.six = team.contractedQuantity;
                                }
                                if(k==7){
                                    tableTeam.seven = team.contractedQuantity;
                                }
                                this.tableData.push(tableTeam);
                            }
                        })
                    }
                })
            },
            
            doDataOverview(){
                var dataOverview = echarts.init(document.getElementById('dataOverview'));
                dataOverview.setOption({
                    title:{
                        text : '数据概况'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend:{
                        data:['居民数量','签约量','服务量']
                    },
                    xAxis:{
                        data:this.dateList
                    },
                    yAxis:{
                        type:'value'
                    },
                    series:[
                        {
                            name:'居民数量',
                            type:'line',
                            stack:'Total',
                            data:this.residentList
                        },
                        {
                            name:'签约量',
                            type:'line',
                            stack:'Total',
                            data:this.contractList
                        },
                        {
                            name:'服务量',
                            type:'line',
                            stack:'Total',
                            data:this.serviceList
                        }

                    ]
                })
            }
        },
    }
</script>

<style scoped lang="less">
    .page-content{
        background-color: #F2F4F6;
    }
    .headData{
        width: 95%;
        height: 121px;
        display: inline-block;
        margin: 10px;
        padding: 5px;
    }
    .card{
        display:inline-block;
        margin: 15px 0px;
        height: 115px;
    }
    .headText{
        font-style: normal;
        font-size: 13px;
        margin: 3px auto;
        width: 100%;
        text-align: center;
        color: #999;
        
    }
    .data{
        text-align: center;
        line-height: 32px;
        font-weight: 650;
        font-size: 30px;
        font-style: normal;
    }
    .residentsQuantity{
        color: #2984F8;
    }
    .doneServicesQuantity{
        color: #28D094;
    }
    .pendingServicesQuantity{
        color: #FFC71C;
    }
    .signedResidentsQuantity{
        color: #FF6262;
    }
    .dataOverviewAndToDoRemin{
        margin: 10px;
        padding: 5px;
        display: inline-block;
        width: 95%;
        height: auto;
    }
    #dataOverview{
        background-color: white;
        display:inline-block;
        width:100%;
        height: 300px;
    }
    #toDoRemin{
        display:inline-block;
        width:100%;
        height:auto;
    }
    .box-card p{
        margin: 5px;
    }
    .item{
        margin: 2px;
        padding: 3px;
        height: 59px;
        border-top: 1px #999 dotted;
    }
    .item span{
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 20px;
        line-height: 24px;
    }

    .item p{
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #999999;
        line-height: 24px;
    }
    .quantityByLabelAndSugar{
        margin: 20px;
        padding: 5px;
        display: inline-block;
        width: 92%;
        height: auto;
    }
    .quantityByLabel{
        background-color: white;
        display:inline-block;
        width:100%;
        height: auto;
        padding: 5px;
    }
    .label{
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #999999;
        text-align: left;
    }
    .quantity{
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        text-align: right;
    }
    .sugarList{
        padding:5px;
        background-color: white;
        width:100%;
        display:inline-block;
        height: 385px;
    }
    .sugar{
        margin: 5px;
        width: 200px;
        border: 1px solid rgb(242, 242, 242);
        height: 278px;
        float:left;
    }
    .sugarName{
        font-weight: 500;
        size: 20px;
        font-kerning: normal;
    }
    .sugarAge{
        font-weight: 400;
        font-size: 12px;
        color: #CCCCCC;
    }
    .sugarData{
        text-align: center;
        margin-top: 100px;
    }
    .teamAndContractedQuantity{
        padding-left: 10px;
        padding-bottom: 30px;
        width: 94%;
        height: auto;
        border: rgb(242, 242, 242) 1px solid;
    }
</style>